<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网络聊天室</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="images/animated_favicon1.gif" type="image/gif" />
<link rel="stylesheet" type="text/css" href="css/chat.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/chat.js"></script>
</head>

<body>
	<div id="chat_header">
    	<p>改变,从心开始&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;---微心理</p>
    </div>
    <div id="chat_body">
    	<div id="chat_body_left">
        	<div class="chat_body_left_head"><p>房间选择</p></div>
            <ul id="roomsinfo">
                <li>
                    <div>
                        <div class="chat_pic">
                            <img src="images/logo.jpg"/>
                        </div>
                        <div class="chat_text">
                            <p>房间号：<span class="room_num">001</span></p>
                            <p>房间人数：<span class="current_num">100</span>人</p>
                            <p>人数上限：<span class="max_num">200</span>人</p>
                        </div>
                    </div>
                </li>
                <li>
                   <div>
                        <div class="chat_pic">
                            <img src="images/logo.jpg"/>
                        </div>
                        <div class="chat_text">
                            <p>房间号：<span class="room_num">002</span></p>
                            <p>房间人数：<span class="current_num">111</span>人</p>
                            <p>人数上限：<span class="max_num">200</span>人</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <div class="chat_pic">
                            <img src="images/logo.jpg"/>
                        </div>
                        <div class="chat_text">
                            <p>房间号：<span class="room_num">003</span></p>
                            <p>房间人数：<span class="current_num">120</span>人</p>
                            <p>人数上限：<span class="max_num">200</span>人</p>
                        </div>
                    </div>
                </li>
                <li>
                   <div>
                        <div class="chat_pic">
                            <img src="images/logo.jpg"/>
                        </div>
                        <div class="chat_text">
                            <p>房间号：<span class="room_num">004</span></p>
                            <p>房间人数：<span class="current_num">90</span>人</p>
                            <p>人数上限：<span class="max_num">200</span>人</p>
                        </div>
                    </div>
                </li>
                <li>
                   <div>
                        <div class="chat_pic">
                            <img src="images/logo.jpg"/>
                        </div>
                        <div class="chat_text">
                            <p>房间号：<span class="room_num">005</span></p>
                            <p>房间人数：<span class="current_num">160</span>人</p>
                            <p>人数上限：<span class="max_num">200</span>人</p>
                        </div>
                    </div>
                </li>
                <li>
                   <div>
                        <div class="chat_pic">
                            <img src="images/logo.jpg"/>
                        </div>
                        <div class="chat_text">
                            <p>房间号：<span class="room_num">006</span></p>
                            <p>房间人数：<span class="current_num">190</span>人</p>
                            <p>人数上限：<span class="max_num">200</span>人</p>
                        </div>
                    </div>
                </li>
                <li>
                   <div>
                        <div class="chat_pic">
                            <img src="images/logo.jpg"/>
                        </div>
                        <div class="chat_text">
                            <p>房间号：<span class="room_num">007</span></p>
                            <p>房间人数：<span class="current_num">155</span>人</p>
                            <p>人数上限：<span class="max_num">200</span>人</p>
                        </div>
                    </div>
                </li>
                <li>
                   <div>
                        <div class="chat_pic">
                            <img src="images/logo.jpg"/>
                        </div>
                        <div class="chat_text">
                            <p>房间号：<span class="room_num">008</span></p>
                            <p>房间人数：<span class="current_num">146</span>人</p>
                            <p>人数上限：<span class="max_num">200</span>人</p>
                        </div>
                    </div>
                </li>
           </ul>
        </div>
       	<div id="chat_body_right">
        	<div class="no_chat">
            	
            </div>
            <div class="start_chat">
            	<div class="start_chat_title">
                	<div>
                    	<ul>
                        	<li id="room_num">房间号：---</li>
                            <li id="current_num">当前人数：---人</li>
                            <li id="max_num">上限人数:---人</li>
                            <li><a onClick="exitRoom()">退出房间</a></li>
                        </ul>
                    </div>
                </div>
                <div class="start_chat_window">
                	<div class="message_win">
                    	<div id="message_win_show">
                        </div>
                    </div>
                    <div class="send_win">
                    	<div class="send_win_tools">
                        	<a>表情</a><a>图片</a><a onclick="clearMsg()">清屏</a>
                        </div>
                        <div class="send_win_area">
                        	<textarea id="send_message_textarea" rows="4" placeholder="在这里输入消息"></textarea>
                            <p>
                                <input type="button" value="取消" onClick="cancelMsg()"/>
                                <input type="button" value="发送(Enter)" onClick="sendMsg()"/>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="body_bottom_hr" style="margin-top:15px;"/>
    <div id="chat_footer">
       	<p>Copyright &copy;2015 WeiXinli Corporation, All Rights Reserved</p>
    </div>
    
</body>
</html>
